<template>
  <v-toolbar color="blue-grey-darken-3">
    <template v-slot:prepend>
      <div class="text-h7">教务管理系统</div>
    </template>

    <v-divider class="ms-3" inset vertical></v-divider>

    <v-spacer></v-spacer>

    <v-spacer></v-spacer>
  </v-toolbar>
  <v-card flat title="选择课程">
    <template v-slot:text>
      <div class="d-flex flex-row">
        <v-text-field
          style="margin: 5px"
          v-model="searchCid"
          label="课程号"
          variant="outlined"
        ></v-text-field>
        <v-text-field
          style="margin: 5px"
          v-model="searchCname"
          label="课程名"
          variant="outlined"
        ></v-text-field>
        <v-text-field
          style="margin: 5px"
          v-model="searchTname"
          label="教师名"
          variant="outlined"
        ></v-text-field>
        <v-btn icon="mdi-magnify" style="margin: 5px" @click="search"></v-btn>
      </div>
    </template>
    <v-data-table :headers="headers" :items="items">
      <template v-slot:item="{ item }">
        <tr>
          <td>{{ item.course_id }}</td>
          <td>{{ item.course_name }}</td>
          <td>{{ item.teacher_name }}</td>
          <td>{{ item.staff_id }}</td>
          <td>{{ item.class_time }}</td>
          <td>{{ item.credit }}</td>
          <td>{{ item.credit_hours }}</td>

          <td>
            <v-btn
              variant="text"
              icon="mdi-plus"
              size="40px"
              @click="selectC(item)"
            ></v-btn>
          </td>
        </tr>
      </template>
    </v-data-table>
  </v-card>
  <v-dialog v-model="selecting" width="auto" persistent>
    <v-card width="400" height="120">
      <v-card-text>
        {{ selectmsg }}
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" block @click="selecting = false">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import axios from "axios";
export default {
  async created() {
    let new_items = [];
    await axios({
      method: "get",
      url: "http://127.0.0.1:8000/student/course_query",
      params: {
        course_id: "",
        course_name: "",
        teacher_name: "",
      },
    }).then((res) => {
      console.log(res);
      new_items = res.data;
    });
    this.items = new_items.data;
    this.refresh = !this.refresh;
  },
  data() {
    return {
      searchCid: "",
      searchCname: "",
      searchTname: "",
      selecting: false,
      refresh: true,
      selectmsg: "",
      headers: [
        { key: "course_id", align: "start",  title: "课程号" },
        { key: "course_name", title: "课程名" },
        { key: "teacher_name", title: "教师名" },
        { key: "staff_id", title: "教师号" },
        { key: "class_time", title: "上课时间" },
        { key: "credit", title: "学分" },
        { key: "credit_hours", title: "学时" },
        { key: "select", title: "选课" },
      ],
      items: [],
    };
  },
  methods: {
    showDropdown(item) {
      // 处理下拉菜单按钮点击事件
      console.log("Dropdown clicked for:", item);
      // 在这里可以添加下拉菜单的显示逻辑
    },
    async search() {
      // 处理搜索按钮点击事件
      this.refresh = !this.refresh;
      console.log(
        "Searching for:",
        this.searchCid,
        this.searchCname,
        this.searchTname
      );
      let new_items = [];
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/student/course_query",
        params: {
          course_id: this.searchCid,
          course_name: this.searchCname,
          teacher_name: this.searchTname,
        },
      }).then((res) => {
        console.log(res);
        new_items = res.data;
      });
      this.items = new_items.data;
      this.refresh = !this.refresh;
      // 在这里可以添加搜索逻辑
    },
    async selectC(course) {
      console.log(course);
      //sname, student_id, semester, course_id, staff_id
      let student_id = this.$root.userinfo.id;
      let sname = this.$root.userinfo.name;
      let msg = "";
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/student/select_course",
        params: {
          course_id: course.course_id,
          staff_id: course.staff_id,
          student_id: student_id,
          sname: sname,
          semester: "2023春季",
          class_time: course.class_time
        },
      }).then((res) => {
        console.log(res);
        msg = res.data.msg;
      });
      this.selectmsg = msg;
      this.selecting = true;
    },
    refreshT() {
      this.refresh = !this.refresh;
      console.log(this.items);
    },
  },
};
</script>

<!-- <script setup>
import { ref, toRef, toRefs, reactive, onMounted } from 'vue';

import axios from 'axios';


let searchCid= ref('');
let searchCname= ref('');
let searchTname= ref('')
let selecting= ref(false)

let refresh=ref(true);

let items = ref([
  { 'course_id': '08305001', 'course_name': '数据库原理', 'teacher_name': '陈迪茂', 'staff_id': '1001', 'class_time': '星期三5-8', 'credit': 4, 'credit_hours': 40 },
  { 'course_id': '08305002', 'course_name': '通信原理', 'teacher_name': '马小红', 'staff_id': '1002', 'class_time': '星期三1-4', 'credit': 4, 'credit_hours': 50 },
]);

const headers = [
  { key: 'course_id', align: 'start', sortable: false, title: '课程号' },
  { key: 'course_name', title: '课程名' },
  { key: 'teacher_name', title: '教师名' },
  { key: 'staff_id', title: '教师号' },
  { key: 'class_time', title: '上课时间' },
  { key: 'credit', title: '学分' },
  { key: 'credit_hours', title: '学时' },
  { key: 'select', title: '选课' },
];

const showDropdown = (item) => {
  // 处理下拉菜单按钮点击事件
  console.log('Dropdown clicked for:', item);
  // 在这里可以添加下拉菜单的显示逻辑
};

let search = async () => {
  // 处理搜索按钮点击事件
  //refresh.value=!refresh.value
  console.log("item",items,"refresh",refresh)
  let itemss=[]
  console.log('Searching for:',searchCid.value, searchCname.value,searchTname.value);
  await axios({
    method: 'get',
    url: 'http://127.0.0.1:8000/student/course_query',
    params: {
      course_id: searchCid.value,
      course_name: searchCname.value,
      teacher_name: searchTname.value,
    },
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    }
  }).then(res => {
        itemss = res.data
    });
    console.log("tiems",itemss)
    items.value=itemss
    console.log("items",items)
    //refresh.value=!refresh.value
  // 在这里可以添加搜索逻辑

};

const selectC = (course) => {
  console.log(course);
  searchData.selecting = true;
};
</script> -->
